<template>
  <a-select v-model="queryParam.value" :placeholder="placeholder" :allow-clear="allowClear" @select="handleChange">
    <a-select-option v-for="item in options" :value="item.value" :title="item.title" :key="item.value"> {{ item.title }} </a-select-option>
  </a-select>
</template>

<script>
export default {
    props: {
        value: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: '请选择支付机构'
        },
        allowClear: {
            type: Boolean,
            default: true
        }
    },
    data () {
        return {
            queryParam: {},
            options: [
                { value: 'a', title: '机构A' },
                { value: 'b', title: '机构B' },
                { value: 'c', title: '机构C' },
                { value: 'd', title: '机构D' },
                { value: 'e', title: '机构E' },
                { value: 'f', title: '机构F' },
                { value: 'g', title: '机构G' },
            ]
        }
    },
    methods: {
        handleChange (val) {
            this.$emit('input', val)
        }
    },
    watch: {
        value (newValue, oldValue) {
            if (oldValue && newValue != oldValue) {
                this.queryParam.value = newValue
            }
        }
    },
}
</script>

<style>

</style>
